<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            width: 80px;
            height: 30px;
        }
    </style>
    <script>
        function $(id) {
            return document.getElementById(id)
        }
        function dod(key) {
            var num1 = Number($('num1').value);
            var num2 = Number($("num2").value);
            switch (key) {
                case '+':
                    List=num1+num2
                    break;
                case '-':{
                    List=num1-num2
                    break;
                }    
                case '*':{
                    List=num1*num2
                    break;
                }
                case '/':{
                    List=num1/num2
                    break;
                }
            }
            $('result').value=List;
        }
    </script>
</head>

<body>
    <h2>简易计算器</h2>
    <p>
        第一个数: <input type="text" id="num1">
    </p>
    <p>
        第二个数: <input type="text" id="num2">
    </p>
    <button id="" onclick="dod('+');">+</button>
    <button id="" onclick="dod('-');">-</button>
    <button id="" onclick="dod('*');">*</button>
    <button id="" onclick="dod('/');">/</button>
    <p>
        结果：<input type="text" id="result" disabled>
    </p>
</body>

</html>